<!--
 * @Author: hongzhew
 * @Date: 2022-04-07 17:43:02
 * @LastEditors: hongzhew
 * @LastEditTime: 2022-04-07 17:44:07
 * @Description: 
-->
<!--  -->
<template>
    <div>
        <el-descriptions
            class="margin-top"
            :column="settingStore.device === 'mobile'? 1 : 2"
            border
        >
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                    {{ $t('系统名称') }}
                    </div>
                </template>
                <span v-if="editFlag" >{{ systemInfo.name }}</span>
                <el-input v-else v-model="systemInfo.name"  />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                    {{ $t('系统中文名称') }}
                    </div>
                </template>
                <span v-if="editFlag" >{{ systemInfo.cnName }}</span>
                <el-input v-else v-model="systemInfo.cnName" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        {{ $t('是否启用') }}
                    </div>
                </template>
                <span  v-if="editFlag">{{ systemInfo.enabled? $t('是') : $t('否')  }}</span>
                <el-radio-group v-else v-model="systemInfo.enabled">
                    <el-radio :label="true">{{ $t('是') }}</el-radio>
                    <el-radio :label="false">{{ $t('否') }}</el-radio>
                </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        {{ $t('独立数据源') }}
                    </div>
                </template>
                <span>{{ systemInfo.singleDatasource? $t('是') : $t('否') }}</span>
                <!-- <el-select v-else v-model="systemInfo.singleDatasource" >
                  <el-option  label="是" :value="true"></el-option>
                  <el-option  label="否" :value="false"></el-option>
                </el-select> -->
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        {{ $t('应用上下文') }}
                    </div>
                </template>
                <span v-if="editFlag" >{{ systemInfo.contextPath }}</span>
                <el-input v-else v-model="systemInfo.contextPath"  />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        {{ $t('排列序号') }}
                    </div>
                </template>
                <span v-if="editFlag" >{{ systemInfo.tabIndex }}</span>
                <el-input v-else v-model="systemInfo.tabIndex"  />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        {{ $t('系统概述') }}
                    </div>
                </template>
                <span  v-if="editFlag">{{ systemInfo.description }}</span>
                <el-input v-else type="textarea" :rows="3"  v-model="systemInfo.description" />
            </el-descriptions-item>
        </el-descriptions>    
    </div>
</template>

<script lang='ts' setup>
import {systemInfoGet} from "@/api/system/index";
import { useSettingStore } from "@/store/modules/settingStore"
const settingStore = useSettingStore();

// 传过来的 系统 id
const props = defineProps({
    id: String, // 系统id
    editFlag: Boolean,  // 编辑 与 查看 的对应显示变量
    saveClickFlag: Boolean, // 是否点击保存 的变量
})
const emits = defineEmits(['getInfoData']);

// 基本信息
let systemInfo = ref({});

// 请求详情 函数
async function getInfo() {
    const responseInfo = await systemInfoGet(props.id);
    systemInfo.value = responseInfo.data;
}

onMounted(() => {
    getInfo();
})
// 监听系统id 当发生改变时重新请求数据 并赋值
watch(() => props.id, async (new_, old_) => {
    if(new_ && new_ !== old_){
        getInfo();
    }
})


// 监听 saveClicFlag 当为true 时 将对象传给 index
watch(() => props.saveClickFlag, async (new_, old_) => {
    if(new_){
        emits('getInfoData', systemInfo.value)
    }
})

</script>
<style scoped lang="scss">
</style>